<template>
  <div class="app">
    <!--元素的v-model-->
    <!--1. input v-model-->
    <input type="text" v-model="message">
    <br>  
    <input type="text" :value="message" @input="message = $event.target.value">
    <!--2. 组件的v-model-->
    <hr>
    <!--组件的v-model, 默认绑定modelValue-->
    <!-- <Counter v-model="appCounter"></Counter> -->
    <!--等价于下面的-->
    <counter v-bind:modelValue="appCounter" v-on:update:modelValue="appCounter = $event"></counter>
    <hr>
    
    <!--组件的v-model, 自定义名称counter-->
    <counter2 v-model:counter="appCounter" v-model:appWhy="appWhy"></counter2>
  </div>
</template>

<script>
  import Counter from './Counter.vue'
  import Counter2 from './Counter2.vue'
  export default {
    components: {
      Counter,
      Counter2
    },
    data() {
      return {
        message: "hello world",
        appCounter: 100,
        appWhy: "why22"
      }
    }
  }
</script>

<style scoped>
</style>